<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" href="../js/jquery-easyui/themes/bootstrap/easyui.css">
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui/datagrid-detailview.js"></script>
    <script src="js/md5.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script src="../js/jquery.serialize-object.js"></script>
    <title>用户管理</title>
</head>
<body style="padding: 0;margin: 0;position:relative;">
<div style="height:100%;width:100%;" class="easyui-layout" fit='true'>
    <div  region="center" style="width:100%" class="easyui-layout"   title="用户管理" border="false">
        <div region='north' id="tb" style="width: 30%; height: 45px;" >
            <table style="margin-left:10px;float:left;height:45px;width: 100%;" cellspacing="0" border="0" >
                <tr >
                    <td>
                        <form id="search_form">
                        微信用户名：<input name="sNickName" style="width:150px;" class="easyui-textbox" />
                        联系电话：<input name="sTel" style="width:120px;" class="easyui-textbox" >
                        登陆权限：<select name="nEnable" style="width:100px;" class="easyui-combobox"  editable='false'>
                        <option value="-1">全部</option>
                        <option value="0">禁止使用</option>
                        <option value="1">微信小程序</option>
                        <option value="2">后台管理员</option>
                        </select>

                        <a href="#" class="easyui-linkbutton search" iconCls="icon-search" onclick="query()">查询</a>
                        <a href="#" class="easyui-linkbutton add" iconCls="icon-add" onclick="add()">增加</a>
                        <a href="#" class="easyui-linkbutton edit" iconCls="icon-edit" onclick="update()">修改</a>
                        <!--<a href="#" class="easyui-linkbutton remove" iconCls="icon-remove" onclick="del()">删除</a>-->
                        </form>
                    </td>
                </tr>
            </table>
        </div>
        <table region='center' style="height: auto;max-height: 100%" id="listgrid" class='easyui-datagrid'  iconCls="icon-edit" toolbar="#tb"
        data-options="
               url:'/selectUser_web',
               fit:true,
               pagination:true,
               rownumbers:true,
               singleSelect:true,
               fitColumns:true,
               showFooter:true,
               columns:[[
                {field:'snickname',title:'微信用户名',width:120},
                {field:'nusersex',title:'性别',width:50,formatter:f_nusersex},
                {field:'nintegral',title:'积分',width:150},
                {field:'stel',title:'联系电话',width:100},
                {field:'susername',title:'后台登陆账号',width:120},
                {field:'nenable',title:'登陆权限',width:100,formatter:f_nenable}
        ]]
        "></table>
    </div>
</div>

<!-- 新增-->
<div id="add_dialog" class="easyui-dialog" closed="true"
     modal="true" style="width: 400px; padding: 10px;">
    <form id="add_form" method="post">
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="sUsername" style="width: 100%;"
                   data-options="label:'后台登陆账号:'" required="required">
        </div>
        <input type="hidden" id="add_form_hpwd" name="sPassword">
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox" id="add_form_pwd"
                   style="width: 100%;"
                   data-options="label:'后台登陆密码:'" required="required">
        </div>
        <div style="margin-bottom:5px; margin-top: 20px">
            <select id="add_form_select_nEnable" name="nEnable" style="width:100%" class="easyui-combobox"  editable='false' required="required"
                    data-options="label:'登陆权限:'">
                <option value="0">禁止使用</option>
                <option value="1">微信小程序</option>
                <option value="2">后台管理员</option>
            </select>
        </div>
    </form>

    <div style="text-align: center; padding-bottom: 10px;padding-top: 15px;">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           style="width: 80px; height: 30px" onclick="addSubmit()">提交</a>
    </div>
</div>

<!-- 修改-->
<div id="edit_dialog" class="easyui-dialog"  closed="true"
     modal="true" style="width: 400px; padding: 10px;">
    <form id="edit_form" method="post">
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox"
                   name="susername" style="width: 100%;"
                   data-options="label:'后台登陆账号:'" required="required">
        </div>
        <input type="hidden" name="nid">
<!--        <input type="hidden" name="respassword" id="edit_form_hpwd">
        <div style="margin-bottom:5px; margin-top: 20px">
            <input class="easyui-textbox" id="edit_form_pwd"
                   style="width: 100%;" name="spassword"
                   data-options="label:'后台登陆密码:'" required="required">
        </div>-->
        <div style="margin-bottom:5px; margin-top: 20px">
            <select name="nenable" style="width:100%" class="easyui-combobox"  editable='false' required="required"
                    data-options="label:'登陆权限:'">
                <option value="0">禁止使用</option>
                <option value="1">微信小程序</option>
                <option value="2">后台管理员</option>
            </select>
        </div>
    </form>

    <div style="text-align: center; padding-bottom: 10px;padding-top: 15px;">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           style="width: 80px; height: 30px" onclick="updateSubmit()">提交</a>
    </div>
</div>

<script type="text/javascript">

    function f_nusersex(value,row,index){
        if(typeof(value) == "undefined"){
            return value;
        }else{
            if(value==0){
                return '女';
            }else{
                return "男";
            }
        }
    }

    function f_nenable(value,row,index){
        if(typeof(value) == "undefined"){
            return value;
        }else{
            if(value==0){
                return '<span style="color:red">禁止使用</span>';
            }else if(value==1){
                return "微信小程序";
            }else if(value==2){
                return "后台管理员";
            }
        }
    }

    //  查找
    function query(){
        $('#listgrid').datagrid('load',$('#search_form').serializeObject());
    }

    function add(){
        $("#add_dialog").dialog("open").dialog("center").dialog("setTitle", "新增");
        $("#add_form").form("clear");
        $('#add_form_select_nEnable').combobox('select', '2');
    }

    //新增提交
    function addSubmit(){
        $.messager.progress();
        $("#add_form_hpwd").val(md5($("#add_form_pwd").textbox("getValue")));
        $('#add_form').form(
            'submit',{
                url:"/addUser_web",
                onSubmit:function(){
                    var isValid = $(this).form('validate');
                    if (!isValid){
                        $.messager.progress('close');
                    }
                    return isValid;
                },
                success:function(result){
                    $.messager.progress('close');
                    if (result ==1){
                        $.messager.show({
                            title:'',
                            msg:'添加成功',
                            showType:'fade',
                            timeout: 2000,
                            style:{
                                right:'',
                                bottom:''
                            }
                        });
                        $('#add_dialog').dialog('close');
                        $("#listgrid").datagrid("reload");
                    }else{
                        $.messager.alert('添加失败');
                    }
                }
            });
    }
    
    function update() {
        $("#edit_form").form("clear");
        var row = $("#listgrid").datagrid("getSelected");
        if (row) {
            $("#edit_form").form("load", row);
            $("#edit_dialog").dialog("open").dialog("center").dialog("setTitle", "修改");
        } else {
            $.messager.show({
                title:'',
                msg:'请选择要修改的记录行',
                showType:'fade',
                timeout: 1000,
                style:{
                    right:'',
                    bottom:''
                }
            });
        }
    }

    //修改提交
    function updateSubmit(){
        $.messager.progress();
        $('#edit_form').form(
            'submit',{
                url:"/updateUser_web",
                onSubmit:function(){
                    var isValid = $(this).form('validate');
                    if (!isValid){
                        $.messager.progress('close');
                    }
                    return isValid;
                },
                success:function(result){
                    $.messager.progress('close');
                    if (result == 1){
                        $.messager.show({
                            title:'',
                            msg:'修改成功',
                            showType:'fade',
                            timeout: 1000,
                            style:{
                                right:'',
                                bottom:''
                            }
                        });
                        $('#edit_dialog').dialog('close');
                        $("#listgrid").datagrid("reload");
                    }else{
                        $.messager.alert('修改失败');
                    }
                }
            });
    }

</script>
</body>
</html>